html, body, h4, p {
  margin: 0;
  padding: 0; }

body {
  font-size: 0.3rem;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none; }

.bg {
  height: 4.7rem;
  border-radius: 0 0 1.4rem 1.4rem;
  background: linear-gradient(to right, #c8d904, #27b18c);
  position: absolute;
  top: 0;
  z-index: -3;
  width: 100%; }
  .bg .text {
    width: 2.6rem;
    height: 0.54rem;
    background: url(../img/title.png) no-repeat center;
    background-size: 100% 100%;
    margin: 0.65rem auto 0; }

.box {
  width: 6.36rem;
  border-radius: 0.1rem;
  box-shadow: 0 0 0.1rem #ccc;
  margin: 0.4rem auto 0.4rem; }

.dayFlow {
  min-height: 5.07rem;
  overflow: hidden;
  background: #fff;
  margin: 1.7rem auto 0.4rem; }

.dayFlow .tit {
  padding: 0.3rem 0;
  text-align: center;
  font-size: 0.34rem;
  color: #878787;
  /*border: 0;*/
  position: relative; }

.dayFlow .tit #iconMore {
  width: 0.22rem;
  height: 0.12rem;
  display: block;
  position: absolute;
  background: url(../img/day.png) no-repeat center;
  background-size: contain;
  left: 50%;
  margin-left: 0.4rem;
  top: 50%;
  /*margin-top: -0.06rem;*/ }

.dayFlow .tit > input {
  font-size: 0.3rem;
  color: #878787;
  text-align: center;
  border: 0; }

.dayFlow .valueBox {
  height: 1.4rem; }

.dayFlow .valueBox .val1 {
  font-size: 0.7rem;
  color: #00aa83;
  text-align: center; }

.dayFlow .valueBox .val2 {
  font-size: 0.26rem;
  color: #999999;
  text-align: center; }

.PHBox {
  overflow: hidden; }

.PHBox .tit {
  height: 0.75rem;
  background: linear-gradient(to left, #2ab190, #d0d902); }

.PHBox .tit .titCon {
  width: 2.5rem;
  margin: 0 auto;
  text-align: center; }

.PHBox .tit .titCon .icon {
  float: left;
  width: 0.11rem;
  height: 0.18rem;
  background: url(../img/dateL.png) no-repeat center;
  background-size: cover;
  margin-top: 0.28rem; }

.PHBox .tit .titCon .right {
  background: url(../img/dateR.png) no-repeat center;
  background-size: cover;
  float: right; }

.PHBox .tit .titCon > input {
  font-size: 0.34rem;
  color: #fff;
  background: transparent;
  text-align: center;
  border: 0;
  width: 2rem;
  height: 0.75rem;
  line-height: 0.75rem; }

.PHBox .valueBox {
  height: 0.6rem;
  text-align: center;
  line-height: 0.6rem;
  font-size: 0.26rem;
  color: #27b18d; }

.PHBox .valueBox > span {
  font-weight: 600; }

.guolvBox {
  height: 4.6rem;
  background: linear-gradient(to left, #feb75b, #fd598c);
  margin: 0 auto; }

.guolvBox .tit {
  height: 1.1rem;
  line-height: 1.1rem;
  width: 6.36rem;
  margin: 0 auto;
  text-align: center;
  position: relative; }
  .guolvBox .tit .left {
    font-size: 0.36rem;
    color: #fff;
    position: absolute; }
  .guolvBox .tit .right {
    position: relative;
    text-align: center; }
    .guolvBox .tit .right > input {
      font-size: .3rem;
      color: #878787;
      text-align: center;
      border: 0;
      background: transparent;
      color: #fee; }
    .guolvBox .tit .right #iconMore1 {
      width: .22rem;
      height: .12rem;
      display: block;
      position: absolute;
      background: url(../img/daywhite.png) no-repeat center;
      background-size: contain;
      left: 50%;
      margin-left: .4rem;
      top: 50%; }

.guolvBox .conBox {
  background: #fff;
  width: 4.8rem;
  padding: 0.3rem 0.78rem;
  margin: 0 auto;
  border-radius: 0.1rem;
  box-shadow: 0 0 0.1rem #ccc;
  overflow: hidden; }

.guolvBox .conBox .circleBox {
  height: 2.1rem;
  position: relative;
  /*background: yellow;*/
  overflow: hidden; }

.guolvBox .conBox .circleBox .name {
  position: absolute;
  z-index: 999;
  font-size: 0.46rem;
  top: 0.8rem;
  left: 0.8rem;
  color: #00aaab; }

.guolvBox .conBox .circleBox .name2 {
  color: #2086ce; }

.guolvBox .conBox .circleBox .name1 {
  color: #00aaab; }

.guolvBox .conBox .circleBox .name0 {
  color: #fb6f93; }

.guolvBox .conBox .circleBox .chart0 {
  transform: rotate(70deg);
  transform-origin: 50% 50%;
  overflow: hidden;
  float: left; }

.guolvBox .conBox .circleBox .chart1 {
  transform: rotate(25deg);
  transform-origin: 50% 50%;
  overflow: hidden;
  float: left; }

.guolvBox .conBox .circleBox .chart2 {
  height: 2.1rem;
  width: 2.1rem;
  float: left; }

.guolvBox .conBox .circleBox .circle1Value {
  float: right;
  height: 100%;
  width: 2.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

.guolvBox .conBox .circleBox .circle1Value > h4 {
  color: #00aaab;
  font-size: 0.36rem;
  margin-bottom: 0.1rem;
  /*font-weight: 100;*/ }

.guolvBox .conBox .circleBox .circle1ValueRed > h4 {
  color: #fb6f93; }

.guolvBox .conBox .circleBox .circle1ValueBlue > h4 {
  color: #2086ce; }

.guolvBox .conBox .circleBox .circle1Value > p {
  font-size: 0.2rem;
  color: #999999; }

/*.areaBox{
    height: 3.7rem;
    overflow: hidden;
}
.areaBox .text{
    font-size: 0.28rem;
    padding: 0.24rem 0.6rem 0;
    overflow: hidden;
}
.areaBox .text .left{
    float: left;
    color: #868686;
    margin-right: 0.5rem;
    height: 0.4rem;
    line-height: 0.4rem;
}
.areaBox .text .left>span{
    font-size: 0.37rem;
    color: #02be8b;
    margin: 0 0.2rem;
}
.areaBox .text .right{
    float: left;
    color: #c8c8ca;
    height: 0.4rem;
    line-height: 0.4rem;
}
.areaBox .text .right>span{
    color: #fa7f9e;
    margin: 0 0.2rem;
}*/
.germLvBox {
  width: 7rem;
  height: 2rem;
  float: left;
  background: linear-gradient(to right, #fd598c, #ffb762);
  border-radius: 0 1rem 1rem 0;
  font-size: 0.2rem;
  margin-top: 0.5rem; }

.germLvBox .left {
  float: left;
  color: #fff;
  padding: 0.45rem 0 0 0.65rem; }

.germLvBox .left > p {
  font-size: 0.2rem; }

.germLvBox .left .bot {
  margin-top: 0.23rem; }

.germLvBox .left .bot .txt {
  float: left;
  width: 2.24rem;
  height: 0.55rem;
  line-height: 0.55rem;
  text-align: center;
  background: #fff;
  font-size: 0.33rem;
  color: #FB7B94;
  border-radius: 0.1rem; }

.germLvBox .left .bot .val {
  float: left;
  font-size: 0.4rem;
  margin-left: 0.16rem; }

.germLvBox .right {
  float: right;
  width: 1.84rem;
  height: 1.84rem;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 100%;
  margin: 0.08rem 0.08rem 0 0; }

.germLvBox .right .circleCon {
  width: 1.68rem;
  height: 1.68rem;
  margin: 0.08rem auto;
  background: #fff;
  border-radius: 100%;
  text-align: center;
  line-height: 1.68rem;
  font-size: 0.36rem;
  color: #fb7b94; }

.linBg {
  float: left;
  width: 100%; }

.linBg .lineBox {
  overflow: hidden;
  min-height: 4.7rem; }

.linBg .lineBox .dateHead {
  height: 0.74rem;
  background: linear-gradient(to left, #2ab190, #d0d902); }

.linBg .lineBox .dateHead .titCon {
  width: 2.5rem;
  margin: 0 auto;
  text-align: center; }

.linBg .lineBox .dateHead .titCon .icon {
  float: left;
  width: 0.11rem;
  height: 0.18rem;
  background: url(../img/dateL.png) no-repeat center;
  background-size: cover;
  margin-top: 0.28rem; }

.linBg .lineBox .dateHead .titCon .right {
  background: url(../img/dateR.png) no-repeat center;
  background-size: cover;
  float: right; }

.linBg .lineBox .dateHead .titCon > input {
  font-size: 0.34rem;
  color: #fff;
  background: transparent;
  text-align: center;
  border: 0;
  width: 2rem;
  height: 0.75rem;
  line-height: 0.75rem; }

.linBg .lineBox .conBox .top {
  min-height: 0.74rem;
  font-size: 0.16rem;
  color: #888888;
  padding: 0.2rem 0.34rem 0; }

.linBg .lineBox .conBox .top .left {
  float: left;
  width: 4.2rem;
  color: #666;
  margin-top: 0.1rem; }

.linBg .lineBox .conBox .top .right {
  float: right; }

.linBg .lineBox .conBox .top .right > div::before {
  content: "";
  display: inline-block;
  width: 0.09rem;
  height: 0.09rem;
  border-radius: 100%;
  background: linear-gradient(to right, #cbd802, #27b18d);
  position: relative;
  top: 0.05rem;
  left: -0.05rem; }

.linBg .lineBox .conBox .top .right > .legendMg::before {
  background: linear-gradient(to right, #fc5a8c, #feb75d); }

#all {
  color: #2865b5; }

#Ca {
  color: #00C087; }

#Mg {
  color: #fc6e94; }

.habitScoreBg {
  float: left;
  width: 100%;
  margin: 0.3rem 0 0.5rem; }

.habitScore {
  height: 2.94rem;
  margin: 0 auto; }

.habitScore .left {
  float: left;
  width: 2.22rem;
  height: 2.22rem;
  background: linear-gradient(to right, #ccdc00, #26b28d);
  margin: 0.36rem;
  border-radius: 100%; }

.habitScore .left .bgWhite {
  border-radius: 100%;
  width: 2.08rem;
  height: 2.08rem;
  background: #fff;
  margin: 0.06rem auto; }

.habitScore .left .bgWhite .conBox {
  width: 1.94rem;
  height: 1.94rem;
  /*background: #00C087;*/
  margin: 0 auto;
  border-radius: 100%;
  position: relative;
  top: 0.07rem;
  overflow: hidden; }

.habitScore .left .bgWhite .con {
  width: 1.94rem;
  height: 1.94rem;
  background: linear-gradient(to bottom, #ccdc00, #26b28d);
  /*background: #00C087;*/
  margin: 0 auto;
  border-radius: 100%;
  position: absolute;
  /*position: relative;*/
  overflow: hidden;
  opacity: .7; }

.habitScore .left .bgWhite .con .mask {
  width: 1.94rem;
  height: 2.3rem;
  background: url(../img/mask.png) no-repeat 0 bottom;
  background-size: cover;
  position: absolute;
  bottom: 1.6rem;
  z-index: 2; }

.habitScore .left .bgWhite .con .score {
  color: #fff;
  font-size: 0.42rem;
  position: absolute;
  width: 1.94rem;
  height: 1.94rem;
  text-align: center;
  line-height: 2.1rem; }

.habitScore .right {
  /*width: 2.8rem;*/
  float: right;
  font-size: 0.16rem;
  color: #00C087;
  padding-right: 0.36rem; }

.habitScore .right .tit {
  font-size: 0.28rem;
  padding: 0.5rem 0 0.2rem; }

.habitScore .right .line {
  height: 0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.05rem; }

.habitScore .right .line > div {
  float: left; }

.habitScore .right .line .contain {
  width: 1.4rem;
  height: 0.1rem;
  background: #c8c9cb;
  border-radius: 0.05rem;
  margin: 0 0.2rem; }

.habitScore .right .line .contain .con {
  height: 0.1rem;
  border-radius: 0.05rem;
  background: linear-gradient(to right, #cbd805, #27b18d);
  width: 20%; }
